<template>
  <div class="login">
    <!--标题-->
    <div class="title">
      <h2>登录</h2>
    </div>
    <!--主体-->
    <div class="main">
      <div class="quickLogin">
        <el-col :span="24" :md="12">
          <el-button class="social-btn qq-btn" @click="quickLogin('QQ登陆成功')">
            <i class="fab fa-qq"></i>
            QQ登录
          </el-button>
          <el-button class="social-btn wechat-btn" @click="quickLogin('微信登陆成功')">
            <i class="fab fa-weixin"></i>
            微信登录
          </el-button>
          <el-button class="social-btn alipay-btn" @click="quickLogin('支付宝登陆成功')">
            <i class="fab fa-alipay"></i>
            支付宝登录
          </el-button>
        </el-col>
      </div>

      <div class="divider">
      </div>

      <div class="normalLogin">
        <el-col :span="24" :md="12">
          <el-form :model="loginForm" @submit.native.prevent="login">
            <el-form-item>
              <el-input v-model="loginForm.username" placeholder="用户名" class="form-input"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="loginForm.password" type="password" placeholder="密码" class="form-input"></el-input>
            </el-form-item>
            <el-button native-type="submit" class="submit-btn" :loading="loading">
              立即登录
            </el-button>
          </el-form>
        </el-col>
      </div>
    </div>
    <!--底部-->
    <div class="footer">
      <router-link to="/register">注册账号</router-link>
      <router-link to="/forget-password">忘记密码？</router-link>
    </div>
  </div>
</template>

<script>
import user from '@/api/user';
import {mapActions} from "vuex";

export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      loading: false
    }
  },
  methods: {
    ...mapActions(['setUsername', 'setPassword','setEmail','setBirthday','setSalary','setAvatar']),
    quickLogin(msg) {
      this.$message.success(msg);
    },
    login() {
      this.loading = true;

      if (this.loginForm.username === '') {
        this.$message.error('用户名不能为空');
        this.loading = false;
        return;
      } else if (this.loginForm.password === '') {
        this.$message.error('密码不能为空');
        this.loading = false;
        return;
      }

      const userInfo = {
        username: this.loginForm.username,
        password: this.loginForm.password
      };

      user.login(userInfo)
          .then(response => {
            console.log('Data:', response.data);
            if (response && response.data && response.data.username) {
              this.$message.success('登录成功');
              this.setUsername(response.data.username)
              this.setPassword(response.data.password)
              this.setEmail(response.data.email)
              this.setBirthday(response.data.birthday)
              this.setSalary(response.data.salary)
              this.setAvatar(response.data.avatar)
              this.$router.push({ name: 'BlogHome' });
            } else {
              this.$message.error('登录失败，请检查用户名和密码');
            }
          })
          .catch(error => {
            this.$message.error('登录失败，请检查用户名和密码');
            console.error(error);
          })
          .finally(() => {
            this.loading = false;
          });
    }
  }
}
</script>

<style scoped lang="stylus">
.login
  width 95%
  max-width 800px
  border-radius 8px
  overflow hidden
  z-index 1
  background #f0f0f0
  padding 2rem
  margin 2rem 2rem

  .title
    text-align center
    margin-bottom 2rem
    h2
      color #333
      font-size 1.5rem
      margin 0

  .main
    position relative
    margin 2rem 2rem 3rem
    display flex
    gap 2rem
    .el-col-md-12
      width 100%
      display block

    .quickLogin
      flex 1
      padding-right 3rem
      .social-btn
        width 100%
        margin 8px 0
        i
          font-size 18px
        &.qq-btn
          background #1890ff
          color white
          &:hover
            background #40a9ff
        &.wechat-btn
          background #07c160
          color white
          &:hover
            background #13ce66
        &.alipay-btn
          background #e5e8e8
          color #000
          &:hover
            background #1da0f2

    .divider
      content ""
      position absolute
      left 50%
      top 10%
      bottom 10%
      width 1px
      background #0b0b0b

    .normalLogin
      flex 1
      padding-left 3rem
      .form-input
        >>> .el-input__inner  // 深度选择器
          height 40px
          border-radius 4px
      .submit-btn
        width 100%
        background #8bb24f
        color white
        border none
        height 40px
        &:hover
          background #40a9ff

  .footer
    display: flex
    justify-content: space-around
    padding: 1rem
    background: #505050
    margin: 0px -40px -40px
    height 30px
    border-radius: 0 0 8px 8px
    a
      color: white;
      text-decoration: none;
      font-size: 14px;
      &:hover
        text-decoration: underline

@media (max-width 800px)
  .login
    .main
      flex-direction column
      .quickLogin
        padding-right 0
      .divider
        display none
      .normalLogin
        padding-left 0
    .footer
      flex-direction: column;
      align-items: center;
      height 100%
      gap: 1rem;
</style>
